<template>
  <div class="before" ref="before">
    <button class="btn" @click="start" ></button>
    <h3>{{!logined ?'请登录或注册后开启定制！！！' : `${user}欢迎您！！！`}}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
     user: JSON.parse(localStorage.user).userName,
     logined: localStorage.token ? true : false
    }
  },
  methods: {
    start(){
      // console.log(1);
      this.$refs.before.style.display = 'none'
    }
  },

}
</script>

<style scoped>
  .before{
    background-color: rgba(255, 255, 255, .3);
    width: 100%; 
    height: 95%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
  }

  .btn{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 80px;
    width: 200px;
    background:url('assets/img/home/主页开始前的按钮.png');
    background-size: 100% 100%;
    border: none;
  }

  h3{
    left: 50%;
    display: block;
    position: absolute;
    top: 75%;
    transform: translate(-50%,-50%);
    font-family: STXingkai;
    color: #fff;
    font-size: 20px;
  }
</style>